// 创建vue实例化对象

var vm = new Vue({
    //绑定标签
    el:"#app",
    // 修改Vue读取变量的语法
    delimiters: ['[[', ']]'],
    //  绑定数据
    // 绑定事件
    data:{

        username:'',
        password:'',
        password2:'',
        mobile:'',
        allow:'',
        //图片验证码
        image_code_url:'',
        image_code:'',
        uuid:'',
        //短信验证码
        sms_code_tip:'获取短信验证码',
        sms_code:'',
        send_flag: false, //类比上厕所 false表示门开

        error_name:false,
        error_password:false,
        error_password2:false,
        error_mobile:false,
        error_allow:false,
        error_image_code:false,
        error_sms_code:false,

        error_name_message:'',
        error_mobile_message:'',
        error_image_code_message:'',
        error_sms_code_message:'',


    },
    //页面加载完成
    mounted(){
        // 生成图形验证码
        this.generate_image_code()
    },
    //绑定事件
    methods: {
        //校验数据
        check_sms_code(){
            if (this.sms_code.length!=6){
                this.error_sms_code_message='请填写短信验证码';
                this.error_sms_code=true;
            }else {
                 this.error_sms_code=false;
            }
        },
         // 发送短信验证码
        send_sms_code(){
            //避免恶意用户频繁点击获取验证码的标签
            //判断是否有人正在上厕所
            if(this.send_flag==true){
                return;//有人在上厕所，退回去
            }else {
                this.send_flag = true;//如果可以进入厕所，立即关门
            }
            //校验数据：mobile image_code
            this.check_mobile();
            this.check_image_code();
            if(this.error_mobile == true||this.error_image_code== true){
                this.send_flag = false;
                return;
            }
            let url = '/sms_codes/'+ this.mobile+ '/ ?image_code='+ this.image_code +'&uuid='+this.uuid;
            axios.get(url,{
                responseType:'json'
            }).then(response=>{
                if(response.data.code == '0'){
                    //展示倒计时60秒(定时器)
                    // setInterval('回调函数','时间间隔')
                    let num = 60;
                    let t = setInterval(()=>{
                          if (num == 1){ //倒计时即将结束
                            clearInterval(t); //停止回调函数的执行
                            this.sms_code_tip = '获取短信验证码'; //还原sms_code_tip的提示文字
                            this.generate_image_code(); //重新生成图形验证码
                            this.send_flag = false;
                        }else {//正在倒计时
                              num = num-1  //num-=1;
                              this.sms_code_tip = num + '秒';
                          }
                    },1000)
                }else {
                    if(response.data.code == '4001'){
                        //图形验证码错误
                        this.error_image_code_message= response.data.errmsg;
                        this.error_image_code = true;
                        this.send_flag = false;
                    }else {//短信验证码4002
                        this.error_image_code_message = response.data.errmsg;
                        this.error_sms_code = true;
                    }
                }
            }).catch(error=>{
                console.log(error.response)
                this.send_flag = false;
            })
        },
        //生成图形校验码的方法:封装思想，方便代码复用
        generate_image_code(){
            this.uuid = generateUUID();
            this.image_code_url='/image_codes/'+ this.uuid +'/';
        },
        //校验用户名
        check_username: function () {
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            if (re.test(this.username)) {
                this.error_name = false;
            } else {
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }
            // 判断用户名是否重复注册
            // 判断用户名是否满足条件
            if (this.error_name === false) {
                let url = '/usernames/' + this.username + '/count/';
                axios.get(url, {
                    responseType: 'json'
                }).then(response => {
                    if (response.data.count == 1) {
                        this.error_name_message = '用户名已存在';
                        this.error_name = true;
                    }
                }).catch(error => {
                    console.log(error.response);
                    this.error_name = false;
                })
            }
        },
         // 校验密码
        check_password(){
             let re = /^[0-9A-Za-z]{8,20}$/;
             if(re.test(this.password)){
                 this.error_password=false;
             }else {
                 this.error_name_message = '请输入5-20个字符的用户名';
                 this.error_password =true;
             }
        },
         // 校验确认密码
        check_password2(){
            if (this.password2 !== this.password){
                this.error_password2 = true;
            }else {
                this.error_password2 =false;
            }
        },
         // 校验手机号
        check_mobile(){
            let re = /^1[3-9]\d{9}$/;
            if(re.test(this.mobile)){
                this.error_mobile = false;
            }else {
                 this.error_mobile_message = '您输入的手机号格式不正确';
                 this.error_mobile = true;
            }
             // 判断手机号是否重复注册
            if(this.error_mobile==false){
                let url = '/mobiles/'+this.mobile+'/count/'
                axios.get(url,{
                    responseType: 'json'
                }).then(response=>{
                    if (response.data.count ==1){
                        this.error_mobile_message = "手机号已存在";
                        this.error_mobile = true;
                    } else {
                        this.error_mobile = false;
                    }
                }).catch(error=>{
                    console.log(error.response)
                })
            }
        },
        //校验图形验证码
        check_image_code(){
            if (this.image_code.length !=4){
                this.error_image_code_message = "请输入正确的图形验证码";
                this.error_image_code = true;
            }else {
                this.error_image_code = false;
            }
        },

        // 校验是否勾选协议
        check_allow(){
            if (!this.allow){
                this.error_allow = true;
            }else {
                this.error_allow = false;
            }
        },
         // 监听表单提交事件
        on_submit(){
            //判断参数是否齐全
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();
            this.check_sms_code();

            if (this.error_name == true || this.error_password==true ||this.error_password2==true || this.error_mobile==true || this.error_image_code == true || this.error_allow==true || this.error_sms_code==true){
                window.event.returnValue = false;
            }
        },
    }
})